<template>
  <div>
    <!-- 头顶导航栏 -->
    <van-nav-bar
      title="常用地址"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- chosenAddressId  选中的地址id -->
    <!-- list  地址数据数组 -->
    <!-- 点击新增按钮触发 -->
    <!-- 切换选中的地址触发 -->
    <van-address-list
      v-model="addressList.id"
      :list="addressList"
      @add="show = true"
      @edit="show2=true"
    />
    <van-action-sheet v-model="show" title="新增地址">
  <div class="content">
    <van-form @submit="onSave">
     <van-field v-model="name" label="姓名" placeholder="请输入收货人姓名"  error-message="请填写收货人姓名"/>
      <van-field v-model="phone" label="电话" placeholder="请输入手机号码"  error-message="请输入正确的手机号"/>
       <van-field v-model="shengshi" label="地区选择" placeholder="点击选择省市区"  error-message="请选择省市区" @click="show1=true" :readonly='true'/>
        <van-field v-model="dizhi" label="详细地址" placeholder="请输入详细地址"  error-message="请输入详细地址"/>
        <van-button type="primary" round size="large" @click="toadd()">提交</van-button>
        </van-form>
  </div>
</van-action-sheet>
<van-popup v-model="show1" position="bottom" :style="{ height: '30%' }" >
<!-- 选省市区 -->
 <van-area title="选择省市区" :area-list="areaList" @confirm="wancheng" @cancel="quxiao"/>
</van-popup>
<van-action-sheet v-model="show2" title="编辑地址">
  <div class="content">
    
     <van-field :v-model="name" label="姓名" />
      <van-field :v-model="phone" label="电话" />
       <van-field :v-model="shengshi" label="地区选择" @click="show1=true" :readonly='true'/>
        <van-field :v-model="dizhi" label="详细地址" />
        <van-button type="primary" round size="large" @click="bianji()">编辑</van-button>
      
         

  </div>
</van-action-sheet>

  </div>
</template>

<script>
import { areaList } from '@vant/area-data';
import { get,post } from "@/http/axios";
import { Toast, NavBar, Field,Area,Notify} from "vant";
import Vue from "vue";
import { AddressList } from "vant";
export default {
  data() {
    return {
      
      name:"",
      phone:"",
      dizhi:"",
      shengshi:"",
      areaList,
      show2:false,
      show1:false,
      show: false,
      province: "",
      city: "",
      area: "",
      address: "",
      trueadress: "",
      page: 1,
      pageSize: 20,
      chosenAddressId: "1",
      list: [],
      addressData: [],
      shengshiqu:'',
      pcaList:[],
    };
  },
  methods: {
    bianji(){

    },
    onSave(){
      let data = {
        name : this.name,
        phone: this.phone,
        shengshi: this.shengshi,
        dizhi: this.dizhi
      }
    },
    quxiao(){
       this.show1=false
    },
    wancheng(values){
      // console.log(values);
      this.pcaList = values
      // console.log(this.pcaList);
      this.shengshi = this.pcaList[0].name+this.pcaList[1].name+this.pcaList[2].name;
      // console.log(this.shengshi);
      this.show1 = false
      // this.shengshi = this.pcaList.name
      // console.log(this.shengshi);
     
    },
    async toadd(){
      let data = {
        username : this.name,
        telephone: this.phone,
        province: this.pcaList[0].name,
        city: this.pcaList[1].name,
        area: this.pcaList[2].name,
        address:this.dizhi,
      }
      // console.log(data);
      let res = await post("/address/saveOrUpdate", data);
      // console.log(res);
      this.show=false
       Notify({ type: "success", message: res.data.message });
       this.getmsg()
    },
    async getmsg() {
      let data = {
        page: this.page,
        pageSize: this.pageSize,
      };
      let res = await get("/address/pageQuery", data);
      // console.log(res.data.data.list);
      this.addressData = res.data.data.list
     
    },
    onClickLeft() {
      this.$router.go(-1); //返回上一层
    },
    onEdit(item, index) {
      Toast("编辑地址:" + index);
    },
  },
    computed:{
    addressList(){
    // 筛选地址数据 生成匹配组件的数据
      let addressArr = this.addressData
      let addressList = []
      if (!addressArr) {
        return;
      }
      addressArr.forEach((item,index) =>{
        let addressObj = {}
        addressObj.id = item.id,
        addressObj.name = item.username,
        addressObj.tel = item.telephone,
        addressObj.address = item.province + item.city + item.area + item.address,
        addressObj.isDefault = item.isDefault
        addressList.push(addressObj)
      });
      return addressList;
    },
  },
  created() {
    this.getmsg();
  },
};
</script>

<style scoped>
  .content {
    padding: 16px 16px ;
  }
</style>